<template>
  <el-space direction="vertical" style="width: 100%">
    <TicketSearchForm
      :ticketInfo="ticketInfo"
      @selectDepartureCity="selectDepartureCity"
      @selectTargetCity="selectTargetCity"
      @swapDepartureTarget="swapDepartureTarget"
      @selectDepartureDate="selectDepartureDate"
    />
    <TicketSearchConditions
      :departureStations="DEPARTURE_STATION"
      :targetStations="TARGET_STATION"
      :searchConditions="searchConditions"
      @selectDepartureTime="selectDepartureTime"
      @selectTrainType="selectTrainType"
      @selectDepartureStation="selectDepartureStation"
      @selectTargetStation="selectTargetStation"
      @selectSeatType="selectSeatType"
    />
    <TrainsList />
  </el-space>
</template>

<script setup lang="ts">
import TicketSearchForm from '@/views/pages/ticketSearch/ticketSearchForm/TicketSearchForm.vue'
import TicketSearchConditions from '@/views/pages/ticketSearch/ticketSearchConditions/TicketSearchConditions.vue'
import TrainsList from '@/views/pages/ticketSearch/trainsList/TrainsList.vue'
import type { SearchConditions, TicketInfo } from '@/types/SharedTypes'
import dayjs from 'dayjs'
import { reactive } from 'vue'

// 搜索框信息
const ticketInfo = reactive<TicketInfo>({
  departureCity: '',
  targetCity: '',
  departureDate: ''
})

// 搜索条件信息
const searchConditions = reactive<SearchConditions>({
  departureTime: dayjs().format('YYYY-MM-DD'),
  trainType: [],
  seatType: [],
  departureStation: [],
  targetStation: []
})

// 出发车站条件信息
const DEPARTURE_STATION: string[] = ['北京', '北京南']

// 到达车站条件信息
const TARGET_STATION: string[] = ['临沂北', '临沂']

// 定义子组件事件
// 选择出发地
const selectDepartureCity = (departureCity: string) => {
  ticketInfo.departureCity = departureCity
}
// 选择目的地
const selectTargetCity = (targetCity: string) => {
  ticketInfo.targetCity = targetCity
}
// 交换出发地与目的地
const swapDepartureTarget = () => {
  [ticketInfo.departureCity, ticketInfo.targetCity] = [ticketInfo.targetCity, ticketInfo.departureCity]
}
// 选择出行日期
const selectDepartureDate = (departureDate: string) => {
  ticketInfo.departureDate = departureDate
}
// 选择出行时间
const selectDepartureTime = (date: string) => {
  searchConditions.departureTime = date
}
// 选择车次类型事件
const selectTrainType = (trainTypes: string[]) => {
  searchConditions.trainType = [...trainTypes]
}
// 选择出发车站
const selectDepartureStation = (departureStation: string[]) => {
  searchConditions.departureStation = [...departureStation]
}
//选择到达车站
const selectTargetStation = (targetStation: string[]) => {
  searchConditions.targetStation = [...targetStation]
}
// 选择车次席别
const selectSeatType = (seatTypes: string[]) => {
  searchConditions.seatType = [...seatTypes]
}
</script>

<style lang="scss" scoped>

</style>